<template>
  <div class="box" v-if="emailList.length">
    <div class="title">
      {{ emailList[0].subject }}
    </div>
    <div class="scroll_view" ref="boxRef">
      <div style="margin-bottom: 20px;" v-for="(item, index) in emailList" :key="index">
        <EmailCon :index="index"  ref="emailConRef" @onScrollTo="handlerToFile" @onClick="handleClick" :email="item" :observer="true"/>
      </div>
    </div>
    <BackToTop />
  </div>
  <div v-else class="box center">
    <div class="empty"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, defineEmits, nextTick } from 'vue';
import { storeToRefs } from 'pinia';

import api from "/@/api/email/index";
import { useEmail } from '/@/stores/email';
import { getEmailName } from '/@/utils/index';
import pinia from '/@/stores/index';
import BackToTop from "/@/components/BackToTop.vue";
import EmailCon from './emailCon.vue';


const stores = useEmail(pinia);
const { currentId } = storeToRefs(stores);

const otherEmail = ref<any>([]);
const emailList = ref<any>([]);
const detail = ref<any>(null);
const boxRef = ref();
const emailConRef = ref();
const userBGColor = ref('');
const messageId = ref('');


const emit = defineEmits(['onClick', 'getDetailFinished']);

const handleClick = (emial: any, action: string) => emit( 'onClick', action, emial);

const getEmailDetail = async() => {
  api.email.getDetail(currentId.value).then((res: any) => {
    const dataList = res.data.list;
    const list = dataList && dataList.length ? dataList : [res.data.emailInfo];
    const newList = list.map((item: any) => adapt(item));
    newList.forEach((item: any, index:number) => {
      // if (item.messageId === messageId.value) {
      //   item.color = userBGColor.value;
      // }
      item.color = userBGColor.value;
      if(index === 0) {
        item.isCollapse = true;
      }else {
        item.isCollapse = false;
      }
      emailList.value.push(item)
    })
    // console.log(newList)
    // console.log(emailList.value)

    setTimeout(() => {
      emit('getDetailFinished')
    },800)
  })
};

const adapt = (email: any) => {
  const ccEmailList = email.ccEmail ? email.ccEmail.split(',') : [];
  const toEmailName = email.toEmailName ?  email.toEmailName : getEmailName(email.toEmail);
  const fromEmailName = email.fromEmailName ? email.fromEmailName : getEmailName(email.fromEmailName);
  const ccEmail = ccEmailList.map((item: string) => adapt2(item));
  return {
    ...email,
    toEmailName,
    fromEmailName,
    ccEmail
  };
};

const setUserBG = (messageIdVal:string, colorVal:string) => {
  // console.log(messageIdVal)
  // console.log(emailList.value)
  messageId.value = messageIdVal
  userBGColor.value = colorVal

  // console.log('test:', emailList.value)
}

const adapt2 = (ccEmail: string) => {
  if (ccEmail.includes(' ')) {
    const list = ccEmail.split(' ');
    return {
      name: list[0],
      email: list[1],
    }
  }
  
  return {
    name: getEmailName(ccEmail),
    email: ccEmail,
  }
}

const handlerToFile = (y: number) => {
  if (boxRef.value) {
    boxRef.value.scrollTop = y;
  }
};

watch(
	() => currentId.value,
	(val) => {
    detail.value = null;
    otherEmail.value = [];
    emailList.value = [];
    if(val) {
      getEmailDetail();
    }
	},
  { immediate: true }
);
defineExpose({setUserBG})
</script>

<style lang="scss" scoped>
.box {
  flex: 1;
  height: 100%;
  padding: 0 0 10px 10px;
  background-color: #F5F6F7;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 550px);

  &.center {
    align-items: center;
    justify-content: center;
  }

  .scroll_view {
    overflow: auto;
  }

  .title {
    font-weight: bold;
    color: #3f464d;
    line-height: 38px;
    padding-right: 20px;
  }

  .empty {
    background: url('/@/assets/emptybg.svg');
    height: 360px;
    width: 360px;
    background-size: cover;
  }
}
</style>
